<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

		<title>Simple Effects for Drop-Down Lists</title>

		<meta name="description" content="Simple Effects for Drop-Down Lists" />

		<meta name="keywords" content="drop-down, select, jquery, plugin, fallback, transition, transform, 3d, css3" />

		<meta name="author" content="Codrops" />

		<link rel="shortcut icon" href="../favicon.ico"> 

		<link rel="stylesheet" type="text/css" href="css/style4.css" />

		<script src="js/modernizr.custom.63321.js"></script>

	</head>

	<body>

		<div class="container">	

			<!-- Codrops top bar --><!--/ Codrops top bar -->

			<header class="clearfix">

				<h1>Simple Effects<span>for Drop-Down Lists</span></h1>

				<nav class="codrops-demos">

					<a href="index.html">Demo 1</a>

					<a href="index2.html">Demo 2</a>

					<a href="index3.html">Demo 3</a>

					<a class="current-demo" href="index4.html">Demo 4</a>

					<a href="index5.html">Demo 5</a>

					<a href="index6.html">Demo 6</a>

				</nav>

			</header>

			<section class="main clearfix">

				<div class="fleft">

					<p>Try holding down the mouse on the drop-down label.</p>

					<p>In this example we use a gutter of 0 (default), stack the items with a slight offset, and rotate the select label while clicking it. The effect will only be visible for browsers supporting 3D transforms.</p>

				</div>

				<div class="fleft">

					<select id="cd-dropdown" class="cd-select">

						<option value="-1" selected>Pick an operating system</option>

						<option value="1" class="icon-tux">Linux</option>

						<option value="2" class="icon-finder">Mac</option>

						<option value="3" class="icon-windows">Windows</option>

						<option value="4" class="icon-android">Android</option>

					</select>

				</div>

			</section>

		</div><!-- /container -->

		<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>

		<script type="text/javascript" src="js/jquery.dropdown.js"></script>

		<script type="text/javascript">

			

			$( function() {

				

				$( '#cd-dropdown' ).dropdown();



			});



		</script>

		

	</body>

</html>

